<template>
  <view class="new_main">
    <view class="cp-taocan">
      <view class="taocan-card">
        <view class="title">
          <text style="font-size: 36rpx; color: #632e0e; font-weight: 500"
            >问答券套餐</text
          >
          <text style="font-size: 24rpx; color: #a67856" @click="goWendaVip"
            >更多＞</text
          >
        </view>
        <view class="ticket-list">
          <view
            class="ticket-item"
            v-for="(item, index) in ticketList"
            :key="index"
          >
            <text
              style="
                font-size: 28rpx;
                color: #333;
                font-weight: 500;
                margin-top: 24rpx;
              "
              >{{ item.type == 1 ? "普通问答券" : "专家问答券" }}</text
            >
            <view class="ticket_num">
              <text style="font-size: 43rpx">{{ item.unitprice }}</text
              >元x{{ item.number }}张
            </view>
            <view class="ticket-bottom">
              <view class="price">
                <text style="font-size: 30rpx">¥</text>
                <text
                  style="font-size: 40rpx; font-weight: bold; margin-left: 2rpx"
                  >{{ item.price }}</text
                >
              </view>
              <view class="ticket-btn" @click="goWendaVip"> 购买 </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="content">
      <view class="title1">
        可使用问答券
        <text style="margin-left: 16rpx; font-size: 26rpx"
          >{{ couponList.length }}张</text
        >
      </view>

      <view class="list mt20" v-for="(item, index) in couponList" :key="index">
        <view class="list_content" v-if="item.status != 2">
          <view class="left">
            <text v-if="item.num_text == 0" class="free">免单</text>
            <text v-else class="discount">{{ item.num_text }}折</text>
            <text style="font-weight: 700" class="fz32">优惠券</text>
          </view>
          <view class="middle">
            <view
              v-if="item.num_text == 0 && item.type == 1"
              class="fz36"
              style="font-weight: 700"
              >普通问答券
            </view>
            <view
              v-if="item.num_text == 0 && item.type == 2"
              class="fz36"
              style="font-weight: 700"
              >专家问答券
            </view>
            <view
              v-if="item.num_text != 0"
              class="fz36"
              style="font-weight: 700"
              >问答{{ item.num_text }}折券
            </view>
            <view class="time c666" :class="{ cff4: item.isToday }">
              {{ item.endtime_text }} 到期
            </view>
            <view class="rules flex c999" @click="showRules = true">
              使用规则<u-icon
                class="arrow"
                name="arrow-down"
                size="12"
              ></u-icon>
            </view>
          </view>
          <image
            class="right_img"
            v-if="currentIndex == index"
            src="@/static/img/my/coupon/icon_choose.png"
            mode="widthFix"
            @click="currentIndex = -1"
          >
          </image>
          <image
            class="right_img"
            v-if="currentIndex != index"
            src="@/static/img/my/coupon/icon_no.png"
            mode="widthFix"
            @click="currentIndex = index"
          >
          </image>
        </view>
      </view>

      <view class="choose_btn" @click="goConfirm">确定</view>
    </view>

    <u-popup
      class="showRules"
      :show="showRules"
      :round="15"
      :closeOnClickOverlay="true"
      mode="center"
      :customStyle="{
        width: '280px',
        minHeight: '500rpx',
        padding: '10px',
        textAlign: 'center',
      }"
      @close="showRules = false"
    >
      <view style="margin-bottom: 20px" class="fz40"> 使用规则 </view>
      <text class="c666" v-html="rule"></text>
    </u-popup>
  </view>
</template>

<script>
import { getCouponList, getTicketList } from "@/static/js/quiz.js";
export default {
  data() {
    return {
      showRules: false, //规则弹窗
      rule: "", //规则
      couponList: [],
      currentIndex: -1, //当前选中的下标
      listType: "",
      couponId: -1, //已选择的优惠券id
      ticketList: [],
    };
  },
  onLoad(e) {
    this.listType = e.type;
    this.couponId = e.couponId;
    this.getCouponList();
    this.getNTicket();
  },
  methods: {
    //确定选择
    goConfirm() {
      if (this.currentIndex > -1) {
        //选择了，则返回优惠券对象
        uni.$emit("returnData", this.couponList[this.currentIndex]);
      } else {
        //没有选择则返回null
        uni.$emit("returnData", null);
      }
      uni.navigateBack({
        delta: 1,
      });
    },

    //获取优惠券列表
    async getCouponList() {
      let res = await getCouponList({
        status: 0,
        type: this.listType,
      });
      if (res.code == 1) {
        let arr = res.data.list;
        for (let item of arr) {
          let a = item.endtime * 1000 - new Date().getTime();
          let isToday = a > 0 && a < 24 * 3600 * 1000; //相差在0~一天内
          this.$set(item, "isToday", isToday);
        }
        this.couponList = arr;
        this.rule = res.data.rule;
        if (this.couponId > -1) {
          for (var i = 0; i < this.couponList.length; i++) {
            if (this.couponList[i].id == this.couponId) {
              this.currentIndex = i;
              break;
            }
          }
        }
      } else {
        this.$tools.msg(res.msg);
      }
    },

    async getNTicket() {
      let res = await getTicketList({});
      if (res.code == 1) {
        this.ticketList = res.data;
      }
    },

    goWendaVip() {
      uni.navigateTo({
        url: "/pages/my/vip/index",
      });
    },
  },
};
</script>

<style lang="scss">
.new_main {
  position: relative;
  background: #f6f6f6;
  min-height: 100vh;

  .cp-taocan {
    margin-top: 30rpx;
    padding: 0 30rpx;
    .taocan-card {
      width: 100%;
      min-height: 510rpx;
      border-radius: 26rpx;
      background: linear-gradient(180deg, #fce9da 0%, #fffbf8 100%);
      padding: 22rpx 0 45rpx 0;
      .title {
        padding: 0 29rpx 0 39rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .ticket-list {
        margin-top: 38rpx;
        overflow: hidden;
        overflow-x: scroll;
        display: flex;
        justify-content: space-between;
        padding: 0 29rpx;

        .ticket-item {
          width: 293rpx;
          height: 352rpx;
          background: #ffffff;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          border-radius: 15rpx;
          position: relative;
          line-height: 1;
          margin-right: 17rpx;
          &:last-child {
            margin-right: 0;
          }
          .ticket_num {
            width: 207rpx;
            height: 122rpx;
            background-image: url("https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/new-vip/vouchers_icon.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: center;
            text-align: center;
            line-height: 122rpx;
            font-size: 35rpx;
            color: #e23331;
            font-weight: 500;
          }
          .ticket-bottom {
            width: 100%;
            height: 95rpx;
            background: linear-gradient(90deg, #f45630 0%, #ff995b 100%);
            border-radius: 0rpx 0rpx 15rpx 15rpx;
            display: flex;
            align-items: center;
            justify-content: space-around;
            .price {
              color: #fff;
            }
            .ticket-btn {
              width: 124rpx;
              height: 55rpx;
              background: #ffe7c5;
              border-radius: 52rpx 52rpx 52rpx 52rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: 500;
              font-size: 28rpx;
              color: #a9652b;
            }
          }
        }
      }
    }
  }

  .content {
    min-height: calc(100vh - 180rpx);
    padding: 20rpx 30rpx 180rpx 30rpx;

    .title1 {
      margin-top: 63rpx;
      font-size: 36rpx !important;
    }

    .list {
      padding: 40rpx;
      width: 690rpx;
      height: 213rpx;
      background: #fff;
      border-radius: 22rpx;
      .list_content {
        display: flex;
        justify-content: space-between;
      }

      .right_img {
        margin-top: 40rpx;
        width: 47rpx;
        height: 47rpx;
      }

      .left {
        display: flex;
        align-items: center;
        flex-direction: column;
        color: #ff4949;
        .free {
          font-size: 48rpx;
          font-weight: bold;
        }

        .discount {
          font-size: 48rpx;
          font-weight: bold;
        }
      }

      .middle {
        .time {
          margin: 10rpx 0;
        }

        .arrow {
          margin-left: 20rpx;
        }
      }
    }
  }
}

.choose_btn {
  position: fixed;
  bottom: 60rpx;
  left: 50rpx;
  width: 647rpx;
  height: 85rpx;
  background: #ff6161;
  border-radius: 147rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 36rpx;
}

/deep/ .u-icon--right {
  margin-top: 10rpx;
  margin-left: 10rpx;
}
</style>
